<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">面经后台</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">面经管理</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>共{{total}}条记录</span>
        <el-button style="float: right; " round type="primary" size="small" icon="el-icon-plus" @click="add">添加面经</el-button>
      </div>

      <el-table :data=articles border="">
        <el-table-column type="index" label="序号" width="90px"></el-table-column>
        <el-table-column prop="stem" label="标题" ></el-table-column>
        <el-table-column prop="creator" label="作者" ></el-table-column>
        <el-table-column prop="likeCount" label="点赞" ></el-table-column>
        <el-table-column prop="views" label="浏览量" ></el-table-column>
        <el-table-column prop="createdAt" label="更新时间" ></el-table-column>
        <el-table-column  label="操作" align="center" width="120px">
            <!-- <template #default="scope">
              {{scope.$index}} -- {{scope.row}}
            </template> -->
            <template #default="scope">
              <el-button type="text" icon="el-icon-view" @click="preview(scope.row.id)"></el-button>
              <el-button type="text" icon="el-icon-edit-outline" @click="showEdit(scope.row.id)"></el-button>
              <el-button type="text" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination class="as"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.current"
        @current-change="changeCurrent"
        >
      </el-pagination>
    </el-card>

      <el-drawer :title="title" :visible.sync="drawer" direction="rtl" size="50%" @close="closeFn">
        <el-form v-if="title !=='预览面经'" label-width="65px" :model="from" :rules="rules" ref="formRef">
          <el-form-item label="标题" prop="stem">
            <el-input v-model="from.stem"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <!-- <quill-input type="textarea" v-model="from.content"></quill-input> -->
            <quillEditor type="textarea" v-model="from.content" ></quillEditor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAdd">确认</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <div v-else>
          <h3>{{from.stem}}</h3>
          <el-divider></el-divider>
          <div v-html="from.content"></div>
        </div>
      </el-drawer>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { getArticleList, delArticle, addArticle, getArticleDetail, updateArticle } from '@/api/article'
export default {
  name: 'name-page',
  created() {
    this.getArticleList()
  },
  data() {
    return {
      params: {
        current: 2,
        pageSize: 10
      },
      articles: [],
      total: null,
      drawer: false,
      title: '',
      from: {
        stem: '', // 标题
        content: ''// 内容
      },
      rules: {
        stem: [{ required: true, message: '不能为空', trigger: 'blue' }],
        content: [{ required: true, message: '不能为空', trigger: 'blue' }]
      }
    }
  },
  methods: {
    async getArticleList() {
      const res = await getArticleList(this.params)
      console.log(res)
      this.articles = res.data.rows
      this.total = res.data.total
    },
    changeCurrent(val) {
      this.params.current = val
      this.getArticleList()
    },
    async del(id) {
      try {
        await this.$confirm('此操作将永久删除此条数据，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delArticle(id)
        this.$message.success('删除成功')

        this.getArticleList()
      } catch (err) {
        console.log(err)
      }
    },
    add() {
      this.form = {
        stem: '', // 标题
        content: '' // 内容
      }
      this.drawer = true
      this.title = '添加面经'
    },
    async showEdit(id) {
      this.title = '修改面经'
      const res = await getArticleDetail(id)
      console.log(res)
      this.from = res.data
      this.drawer = true
    },
    closeFn() {
      if (this.title !== '预览面经') {
        this.$refs.formRef.resetFields()
      }
    },
    async saveAdd() {
      try {
        await this.$refs.formRef.validate()
        if (this.from.stem.length > 0) {
          // 编辑
          const from = {}
          from.id = this.from.id
          from.stem = this.from.stem
          from.content = this.from.content
          await updateArticle(from)
          this.$message.success('修改成功')
        } else {
          // 添加
          await addArticle(this.from)
          this.$message.success('添加成功')
        }
        this.getArticleList()
        this.drawer = false
      } catch (err) {
        console.log(err)
      }
    },
    async preview(id) {
      this.title = '预览面经'
      const res = await getArticleDetail(id)
      console.log(res)
      this.from.stem = res.data.stem
      this.from.content = res.data.content
      this.drawer = true
    }
  },
  components: {
    quillEditor
  }
}
</script>

<style scoped lang='scss'>
.box-card {
    margin-top: 20px;
}
.as {
    text-align: center;
    margin-top: 15px;
}
::v-deep .ql-editor {
  min-height: 240px
}
::v-deep .el-drawer__body{
  padding:20px;
}
</style>
